<style scoped lang="less">
	.comment-container {
		background-color: white;
		padding: 2vh 3vw;
	}
	
	.comment-user-info {
		display: flex;
		align-items: center;
		justify-content: center;
		max-width: 70vw;
	}
	
	.comment-img {
		width: 8vw;
		height: 8vw;
		border-radius: 50%;
		margin-right: 1vw;
	}
	
	.comment-item {
		margin-top: 1vh;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	span.comment-nickname {
		font-size: 0.3rem;
		color: @--gray;
	}
	
	.comment-title {
		font-size: 0.45rem;
		font-weight: bold;
		color: @--title-text;
		padding: 2vh 0;
	}
	
	.more {
		text-align: center;
		font-size: 0.4rem;
		color: @--gray;
		margin-top: 4vh;
	}
	
	.comment-date {
		font-size: 0.4rem;
		color: @--gray;
	}
	
	.comment-content {
		font-size: 0.4rem;
		padding: 2vw;
		text-align: left;
		color: #A3A3A3;
		background: #fafafa;
		border-radius: 2vw;
		margin: 1.5vh 0;
	}
	
	img.comment-imgs {
		width: 13vw;
		height: 13vw;
		padding: 1vw;
	}
	
	.comment-imgs-wrap {
		display: flex;
		flex-wrap: wrap;
	}

</style>
<template>
	<div class="comment-container" v-if="list!==null">
		<div class="comment-title">评价</div>
		<div class="item-wrap">
			<van-list
				v-model="loading"
				:finished="finished"
				:finished-text="loadMore?(count>0?'没有更多了':'暂无评价'):''"
				@load="onLoad"
			>
				<div v-for="(item,index) in list" :key="index">
					<div class="comment-item">
						<div class="comment-user-info">
							<img class="comment-img" :src="item.userInfo.head_img"/>
							<span class="comment-nickname">
			          {{item.userInfo.nickname}}
			        </span>
							<van-rate size="0.3rem" v-model="item.rate"/>
						</div>
						<div class="comment-date">{{item.create_time.substr(0,10)}}</div>
					</div>
					<div class="comment-content">{{item.content}}</div>
					<div class="comment-imgs-wrap">
						<img @click="pre(index,i)" class="comment-imgs" v-for="(img,i) in item.imgs" :key="img"
						     :src="GLOBAL.getUrl(img,true,false)" v-lazy="GLOBAL.getUrl(img,true,false)">
					</div>
				</div>
			</van-list>
			<div class="more" @click="more" v-if="!loadMore">{{count>0?'查看更多':'暂无评价'}}</div>
		</div>
	</div>
</template>
<script>
  import {getList} from "@/api/comment";
  import Vue from 'vue';
  import {ImagePreview, Lazyload, List, Rate} from 'vant';

  Vue.use(ImagePreview).use(Lazyload).use(List).use(Rate);

  export default {
    name: 'goods-comment',
    props: {
      goods_id: {type: Number, default: -1},
      size: {type: Number, default: 3},
      loadMore: {type: Boolean, default: true}
    },
    watch: {
      'goods_id': {
        handler(n, o) {
          if (!this.loadMore)
            this.getList();
        },
        deep: true,
        immediate: true
      },
    },
    data() {
      return {
        loading: false,
        finished: false,
        list: [],
        count: 0
      };
    },
    methods: {
      onLoad() {
        //判断是不是需要加载更多
        if (!this.loadMore) {
          return;
        }
        this.getList();
      },
      pre(index, i) {
        let preImgs = [];
        let vm = this;
        this.list[index].imgs.forEach(v => {
          preImgs.push(vm.GLOBAL.getUrl(v));
        });
        ImagePreview({
          images: preImgs,
          startPosition: i,
          lazyLoad: true
        });
      },
      more() {
        this.$router.push({name: 'goods-comment', params: {goods_id: this.goods_id}});
      },
      getList() {
        if (this.finished) {
          return;
        }
        let page = this.list.length / this.size + 1;
        getList({goods_id: this.goods_id, size: this.size, page: page}).then(rep => {
          this.count = rep.data.data.count;
          if (!this.loadMore) {
            this.finished = true;
          }
          rep.data.data.list.forEach((item) => {
            if (item.imgs != null) {
              item.imgs = JSON.parse(item.imgs);
            }
          });
          this.list = this.list.concat(rep.data.data.list);
          if (this.list.length === rep.data.data.count) {
            this.finished = true;
          }
        })
      }
    }
  }
</script>